<template>
	<view class="container">
		<tui-navigation-bar :isOpacity="false" :maxOpacity="1" @init="initNavigation" :scrollTop="scrollTop"
			backgroundColor="#fff" color="#333" :title="pageTitle">
			<view class="tui-header" :style="{ marginTop: navBarTop + 'px' }">
				<view class="get-back dy-iconfont icon-qiehuanqizuo" @click="goBack"></view>
			</view>
		</tui-navigation-bar>
		<view class="main">
			<view class="main-loading">
				<uv-loading-icon :show="!commentList.loading" :size="28" timing-function="linear"
					mode="circle"></uv-loading-icon>
			</view>
			<view class="comment-list" v-if="commentList.list.length > 0">
				<view class="comment-item" v-for="(item,index) in commentList.list" :key="index"
					@tap.stop.prevent="openPostDetils(item)">
					<image class="user-avatar" :src="item.commentUserAvatar" mode="aspectFill"></image>
					<view class="comment-info">
						<view class="user-name">
							<view class="name">{{item.commentUserName}}</view>
							<text class="time">{{ item.createTime | timeFormats}}</text>
						</view>
						<view class="content twolist-hidden">评论了你：{{item.comment}}</view>
						<view class="reply" @tap.stop.prevent="reply(item)">
							<image class="user-avatar" :src="item.commentUserAvatar"></image>
							<text>回复评论</text>
						</view>
					</view>
					<!-- <image class="comment-image" :src="item.userAvatar" mode="aspectFill"></image> -->
				</view>
			</view>
			<view v-show="commentList.loading && commentList.list.length <= 0">
				<empty fixed></empty>
			</view>
			<view v-show="load.loading">
				<uv-load-more :status="load.status" :loading-text="load.loadingText" :nomore-text="load.nomoreText"
					:line="load.status == 'nomore'" />
			</view>
		</view>
		<comment-foot ref="commentFoot" :list="commentList.list" @onReply="onReply" @changinput="changinput"
			@footInputClose="footInputClose" :placeholder="placeholder"></comment-foot>
		<survey-pop></survey-pop>
		<uv-toast ref="toast"></uv-toast>
	</view>
</template>

<script>
	import mp from "@/mixins/mp.js";
	import tabbar from '@/components/custom-tabbar/custom-tabbar.vue';
	import throttle from '@/uni_modules/uv-ui-tools/libs/function/throttle.js';
	import {
		timeFrom
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js';
	const app = getApp();
	export default {
		mixins: [mp],
		options: {
			styleIsolation: 'shared'
		}, //解决/deep/不生效**
		components: {
			tabbar,
		},
		data() {
			return {
				tabbarCurrent: 2, //当前索引
				tabBar: app.globalData.tabBar,
				navBarOpacity: 0, //标题图标距离顶部距离
				scrollTop: 0.5, //页面滚动高度
				navBarTop: 0, // 导航栏content顶部m-top
				skeletonShow: true, //加载框
				pageTitle: '收到的评论', //标题
				commentList: {
					list: [],
					hasMore: false,
					loading: false,
					page: 1,
				},
				load: {
					loading: false,
					status: 'loading',
					loadingText: '努力加载中',
					nomoreText: '没有更多了'
				},
				placeholder: '说点什么...',
				inputText: '',
				replyInfo: null,
				conversationID: '',
			};
		},
		/**
		 * 计算属性
		 */
		computed: {},
		filters: {
			timeFormats: function(value) {
				if (value == 0 || !value) {
					return ''
				} else {
					return timeFrom(new Date(value).getTime(), false)
				}
			},
		},
		onLoad(options) {
			this.conversationID = options.conversationID
			this.getPageData()
		},
		onShow: function() {
			this.setMessageRead()
			app.globalData.tabBar[0].name = 'active-home'
		},
		/**
		 * 下拉
		 */
		onPullDownRefresh: function() {
			this.commentList.page = 1
			this.getPageData()
		},
		/**
		 * 触底
		 */
		onReachBottom() {
			if (this.commentList.hasMore && this.commentList.loading) {
				this.load.loading = true
				this.getPageData()
			}
		},
		/**
		 * 滚动
		 */
		onPageScroll(res) {
			this.scrollTop = res.scrollTop;
		},
		methods: {
			goLogin() {
				app.doLogin()
			},
			initNavigation(e) {
				this.navBarOpacity = e.opacity;
				this.navBarTop = e.top;
			},
			// 清空未读消息数
			setMessageRead() {
				// 将某会话下所有未读消息已读上报
				// let promise = uni.$TUIKit.setMessageRead({
				// 	conversationID: this.conversationID
				// });
				// promise.then(function(imResponse) {
				// 	// 已读上报成功，指定 ID 的会话的 unreadCount 属性值被置为0
				// 	console.log(imResponse);
				// }).catch(function(imError) {
				// 	// 已读上报失败
				// 	console.warn('setMessageRead error:', imError);
				// });
			},
			// 加载页面数据
			getPageData: function(callback) {
				Promise.all([this.requestPengList()]).then(() => {
					uni.stopPullDownRefresh();
				});
			},
			requestPengList() {
				return new Promise((resolve, reject) => {
					this.commentList.loading = false
					app._post_form(
						"/client/forum-comment/im-comment-page", {
							current: this.commentList.page,
							extra: {},
							model: {
								clientImId: null,
								userId: null
							},
							order: "descending",
							size: 10,
							sort: "createTime"
						},
						(result) => {
							let {
								records,
								total
							} = result.data;
							let {
								page,
								list,
								hasMore
							} = this.commentList;
							if (1 == page) {
								list.length = 0;
							}
							list = [...list, ...records];
							hasMore = total > list.length;
							this.commentList.list = list;
							this.commentList.hasMore = hasMore;
							if (hasMore) {
								page++;
								this.load.loading = false
							} else if (list.length > 3) {
								this.load.loading = true
								this.load.status = 'nomore'
							} else {
								this.load.status = 'nomore'
							}
							this.commentList.page = page;
						}, null, () => {
							resolve();
							this.commentList.loading = true
						}
					);
				});
			},

			reply(item) {
				console.log(item);
				this.replyInfo = item
				this.placeholder = '回复@' + item.commentUserName
				this.$refs.commentFoot.tapInput();
			},
			// 用户输入
			changinput(e) {
				this.inputText = e
			},
			// 输入框弹窗关闭
			footInputClose() {
				if (!this.inputText) {
					setTimeout(() => {
						this.placeholder = '说点什么...'
					}, 200)
				}
			},
			// 回复内容校验
			validMessages(str) {
				var re = /\S/
				return re.test(str)
			},
			// 回复
			onReply(e) {
				let that = this
				if (!that.validMessages(that.inputText)) {
					that.$refs.toast.show({
						type: 'default',
						message: "请输入回复内容"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return
				}
				if (!e) {
					that.$refs.toast.show({
						type: 'default',
						message: "输入文字不合法"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
					return
				}
				throttle(app._post_form('/client/forum-topic/submit-comment', {
					comment: that.inputText,
					commentType: 0,
					forumId: that.replyInfo.forumId,
					commentId: that.replyInfo.commentId,
				}, (result) => {
					that.inputText = ''
					that.$refs.commentFoot.changinputSec()
					uni.hideKeyboard();
					that.$refs.toast.show({
						type: 'default',
						message: "评论成功"
					})
					setTimeout(() => {
						that.$refs.toast.hide()
					}, 1000)
				}, null, (err) => {
					that.inputText = ''
					that.$refs.commentFoot.changinputSec()
				}), 1000, true)
			},

			clickHead(item) {
				let id = item.receiveUserId
				app.navigationTo('page_sharing/accompany/details?id=' + id + '&from=1')
			},
			openPostDetils(item) {
				console.log(item);
				uni.navigateTo({
					url: '/page_community/details/details?id=' + item.forumId,
				});
			},

			// 返回上一页
			goBack: function(url) {
				app.beNavigateBack();
			},
		},
	};
</script>
<style lang="scss" scoped>
	.container {
		background: #FFFFFF;
		box-sizing: border-box;
		min-height: 100vh;

		.tui-header {
			width: 100%;
			position: fixed;
			top: 0;
			padding: 0 42rpx;
			display: flex;
			align-items: center;
			height: 32px;
			transform: translateZ(0);
			z-index: 99999;
			box-sizing: border-box;

			.get-back {
				flex-shrink: 0;
				width: 36rpx;
				height: 36rpx;
				color: #000;
				font-size: 36rpx;
				padding: 2rpx 40rpx 2rpx 2rpx;
			}
		}

		.main {
			box-sizing: border-box;
			padding: 192rpx 0 40rpx;
			/* #ifdef H5 */
			padding-top: calc(192rpx - 88rpx);
			/* #endif */
			padding-bottom: calc(40rpx + constant(safe-area-inset-bottom));
			padding-bottom: calc(40rpx + env(safe-area-inset-bottom));

			.main-loading {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translateX(-50%);
			}

			.comment-list {
				.comment-item {
					box-sizing: border-box;
					padding: 36rpx;
					display: flex;

					.user-avatar {
						width: 88rpx;
						height: 88rpx;
						margin-right: 12rpx;
						border-radius: 50%;
						flex-shrink: 0;
					}

					.comment-image {
						width: 88rpx;
						height: 120rpx;
						border-radius: 20rpx;
						flex-shrink: 0;
						margin-left: 98rpx;
					}

					.comment-info {
						flex: 1;

						.user-name {
							display: flex;
							align-items: center;
							justify-content: space-between;
							margin-bottom: 8rpx;

							.name {
								margin-bottom: 8rpx;
								font-size: 30rpx;
								font-weight: 600;
								color: #282D2D;
								line-height: 42rpx;
							}

							.time {
								font-size: 24rpx;
								font-weight: 400;
								color: #999B9B;
								line-height: 33rpx;
							}
						}

						.content {
							font-size: 26rpx;
							font-weight: 400;
							color: #282D2D;
							line-height: 37rpx;
							position: relative;

							.con {
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								font-size: 100rpx;
								overflow: hidden;
							}

						}

						.reply {
							width: 148rpx;
							height: 44rpx;
							background: #F6F8F7;
							border-radius: 21rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #282D2D;
							line-height: 33rpx;
							margin-top: 14rpx;
							display: flex;
							justify-content: center;
							align-items: center;

							.user-avatar {
								width: 28rpx;
								height: 28rpx;
								margin-right: 4rpx;
							}
						}
					}
				}
			}
		}
	}
</style>